<!DOCTYPE html>
<html>
<head>
    <title>Web Design in 4 minutes</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Base styles */

        a strong {
            color: inherit;
        }

        hr {
            background: none;
            border: none;
            border-bottom: 1px solid #d8dee9;
        }

        img {
            height: auto;
            max-width: 100%;
        }

        pre {
            overflow: auto;
            white-space: pre-wrap;
        }

        footer {
            align-items: center;
            display: flex;
            justify-content: center;
            margin-top: 4em;
            text-align: center;
        }

        /* Initial state */

        #visited {
            background-color: white;
            bottom: 0;
            color: white;
            display: block;
            left: 0;
            padding: 1em;
            position: fixed;
            right: 0;
            text-align: center;
        }

        #visited:visited {
            background-color: #e81c4f;
        }

        #logo,
        section,
        footer {
            display: none;
        }

        #start {
            display: block;
        }

        /* 00 Content */

        html.step0 #content {
            display: block;
        }

        /* 01 Centering */

        html.step1 #centering {
            display: block;
        }

        html.step1 header,
        html.step1 main {
            margin: 0 auto;
            max-width: 50em;
        }

        /* 02 Font family */

        html.step2 #font-family {
            display: block;
        }

        html.step2 body {
            font-family: "Helvetica", "Arial", sans-serif;
        }

        /* 03 Spacing */

        html.step3 #spacing {
            display: block;
        }

        html.step3 body {
            line-height: 1.5;
            padding: 4em 1em;
        }

        html.step3 h2 {
            margin-top: 1em;
            padding-top: 1em;
        }

        /* 04 Color and contrast */

        html.step4 #color-contrast {
            display: block;
        }

        html.step4 body {
            color: #555;
        }

        html.step4 h1,
        html.step4 h2,
        html.step4 strong {
            color: #333;
        }

        html.step4 a strong {
            color: inherit;
        }

        /* 05 Balance */

        html.step5 #balance {
            display: block;
        }

        html.step5 code,
        html.step5 pre {
            background: #eee;
        }

        html.step5 code {
            padding: 2px 4px;
            vertical-align: text-bottom;
        }

        html.step5 pre {
            padding: 1em;
        }

        /* 06 Primary color */

        html.step6 #primary-color {
            display: block;
        }

        html.step6 a {
            color: #e81c4f;
        }

        /* 07 Secondary colors */

        html.step7 #secondary-colors {
            display: block;
        }

        html.step7 body {
            background: white;
            color: #566b78;
        }

        html.step7 code,
        html.step7 pre {
            background: #f5f7f9;
            border-bottom: 1px solid #d8dee9;
            color: #a7adba;
            -moz-font-smoothing: grayscale;
            -webkit-font-smoothing: initial;
        }

        html.step7 pre {
            border-left: 2px solid #69c;
        }

        html.step7 .selector {
            color: #ec5f67;
        }

        html.step7 .keyword {
            color: #ab7967;
        }

        html.step7 .unit {
            color: #fac863;
        }

        html.step7 .attribute {
            color: #5fb3b3;
        }

        html.step7 .number {
            color: #f99157;
        }

        html.step7 .string {
            color: #c594c5;
        }

        /* 08 Custom font */

        html.step8 #custom-font {
            display: block;
        }

        html.step8 body {
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            -moz-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
        }

        html.step8 h1,
        html.step8 h2,
        html.step8 strong {
            font-weight: 500;
        }

        /* 09 Images */

        html.step9 #images {
            display: block;
        }

        html.step9 body {
            margin: 0;
            padding: 0;
        }

        html.step9 main {
            padding: 4em 1em;
        }

        html.step9 header {
            background-color: #263d36;
            background-image: url("https://coding.net/u/hoteam/p/Cache/git/raw/master/2016/7/3/header.jpg");
            background-position: center top;
            background-repeat: no-repeat;
            background-size: cover;
            line-height: 1.2;
            max-width: none;
            padding: 10vw 2em;
            text-align: center;
        }

        html.step9 #logo {
            display: inline-block;
            height: 120px;
            vertical-align: top;
            width: 120px;
        }

        html.step9 header h1 {
            color: white;
            font-size: 2.5em;
            font-weight: 300;
        }

        html.step9 header a {
            border: 1px solid #e81c4f;
            border-radius: 290486px;
            color: white;
            font-size: 0.6em;
            letter-spacing: 0.2em;
            padding: 1em 2em;
            text-transform: uppercase;
            text-decoration: none;
            transition: none 200ms ease-out;
            transition-property: color, background;
        }

        html.step9 header a:hover {
            background: #e81c4f;
            color: white;
        }

        /* 10 Share */

        html.step10 #share,
        html.step10 footer {
            display: block;
        }

        /* Classes */

        .animate {
            animation-duration: 1s;
            animation-name: blink;
        }

        @keyframes blink {
            from {
                background-color: lightyellow;
            }

            to {
                background-color: transparent;
            }
        }

        html a.button {
            border: 1px solid #d8dee9;
            border-radius: 290486px;
            color: #b0bfc7;
            padding: 1em 1.5em;
            text-align: center;
            text-decoration: none;
            transition: none 200ms ease-out;
            transition-property: color, background;
        }

        html a.button strong {
            color: #e81c4f;
        }

        .button:hover {
            background: #e81c4f;
            border-color: transparent;
            color: rgba(255, 255, 255, 0.5);
        }

        .button em {
            display: block;
            font-size: 0.6em;
            font-style: normal;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

        .button strong {
            color: #e81c4f;
            transition: color 200ms ease-out;
        }

        .button:hover strong {
            color: white !important;
        }

        .button.github strong {
            color: #333;
        }

        .button.github:hover {
            background: #333;
        }

        .button.facebook strong {
            color: #3b5998;
        }

        .button.facebook:hover {
            background: #3b5998;
        }

        .button.twitter strong {
            color: #55acee;
        }

        .button.twitter:hover {
            background: #55acee;
        }

        footer .button {
            font-size: 0.8em;
            padding: 1em 2em;
        }

        .buttons .button {
            display: block;
            margin-bottom: 1em;
        }

        /* Responsiveness */

        @media (min-width: 600px) {
            .buttons {
                align-items: center;
                display: flex;
                justify-content: space-between;
                padding: 1em 0;
            }

            .buttons .button {
                flex-grow: 1;
                flex-shrink: 0;
                margin-bottom: 0;
                margin-right: 1em
            }

            .buttons .button:last-child {
                margin-right: 0;
            }
        }


    </style>
</head>
<body>
<header id="header">
    <img id="logo" src="https://coding.net/u/hoteam/p/Cache/git/raw/master/2016/7/3/jt.png" alt="JT logo">
    <h1>4分钟内了解Web Design</h1>
    <p>
        <a href="http://jgthms.com/" target="_blank">原作者:Jeremy Thomas / 译者:王下邀月熊</a>
    </p>

</header>

<main>
    <section id="start">
        <p>当你希望分享一些产品、文件或者一个新的想法在你
            <em>自己的</em> 网站上时,在你正式的发布网站之前,你需要把它打扮的漂漂亮亮,充满吸引力,不一定专业,但是至少要<em>得体</em> .
        </p>
        <p>那么我们应该从 <a class="step" data-step="0" href="#content">哪里</a> 启动呢?如果你想了解我是怎么做的,那么请点击左边的链接</p>
    </section>

    <section class="animate" id="content">
        <h2>内容</h2>
        <p>别忘了, <strong>设计</strong> 是为了更好地展示内容. 貌似这是一句废话,不过还是要强调网站中
            <strong>首要</strong> 的元素正是内容, 而不应该置若罔闻,放到最后.
        </p>
        <p>我们正在编写的内容,就好像你看到的这段话,占据了一个网站90%以上的部分,为文本内容添加合适的样式任重而道远.</p>
        <p>假设你已经决定好了要展示的内容,然后创建了一个空白的 <code>style.css</code>
            文件,那么 <a class="step" data-step="1" href="#centering">第一条自定义样式规则</a> 会是啥呢?</p>
    </section>

    <section id="centering">
        <h2>居中</h2>
        <p>在单行中放置过长的文本会难以解析,并且难以 <strong>阅读</strong>. 为每行的单词数目设置一个上限有助于提升整体的可读性,让读者好像为文本建立了一个笆篱</p>
<pre>
    <span class="selector">body</span> {
        <span class="attribute">margin</span>: <span class="number">0</span> auto;
        <span class="attribute">max-width</span>: <span class="number">50</span><span class="unit">em</span>;
    }
</pre>
        <p>我们已经为 <em>文本块</em>设置了样式, 那么应该如何为 <a class="step" data-step="2"
                                                                             href="#font-family">文本本身</a>添加样式呢?</p>
    </section>

    <section id="font-family">
        <h2>Font family</h2>
        <p>浏览器默认的字体是 <code>"Times"</code>, 有时候看上去是如此的枯燥无味. 尝试使用
            <strong>无衬线字体</strong>譬如 <code>"Helvetica"</code> 或者 <code>"Arial"</code>
            能够提升你整个界面的感官
        </p>
<pre>
    <span class="selector">body</span> {
        <span class="attribute">font-family</span>:
        <span class="string">"Helvetica"</span>,
        <span class="string">"Arial"</span>, sans-serif;
    }</pre>
        <p><em>如果你打算使用衬线字体,试试 <code>"Georgia"</code>.</em></p>
        <p>我们选择一些有趣的字体,能够让网站更有 <em>吸引力</em>, 下一步,就让我们再
            <a class="step" data-step="3"
               href="#spacing">提高可读性</a>.
        </p>
        <p>王下邀月熊:这里原作者是为英文字体样式做了说明,我没有修改为中文样式,大概是懒吧,不过因为中文字体往往都比较大,建议使用font-spider等类似工具来抽取你所需要的字体</p>
    </section>

    <section id="spacing">
        <h2>间隔</h2>
        <p>有时候用户会抱怨网站好像坏掉了,往往都是 <strong>间隔</strong> 的问题.
            在你文档的
            <em>四周</em> 与 <em>内部</em>都添加些间隔也能够美化你的网站.
        </p>
<pre><span class="selector">body</span> {
  <span class="attribute">line-height</span>: <span class="number">1.5</span>;
  <span class="attribute">padding</span>: <span class="number">4</span><span class="unit">em</span> <span
            class="number">1</span><span class="unit">em</span>;
}

  <span class="selector">h2</span> {
  <span class="attribute">margin-top</span>: <span class="number">1</span><span class="unit">em</span>;
  <span class="attribute">padding-top</span>: <span class="number">1</span><span class="unit">em</span>;
}</pre>

        <p>
            现在网站看上去好了不少了,布局方面提升了很多,下一步我们进行些
            <a class="step" data-step="4"
               href="#color-contrast">细节的美化</a>.
        </p>
    </section>

    <section id="color-contrast">
        <h2>颜色 &amp; 反差</h2>
        <p>白底黑字有时候会看起来很刺眼. 为body选择一个阴影较浅的字体会带来 <strong>舒适的</strong> 阅读体验.</p>
<pre><span class="selector">body</span> {
  <span class="attribute">color</span>: <span class="number">#555</span>;
}</pre>
        <p>同时为了保证较好地 <strong>反差</strong>, 我们会为 <strong>重要的</strong>
            单词选择使用深色的字体颜色</p>
<pre><span class="selector">h1</span>,
<span class="selector">h2</span>,
<span class="selector">strong</span> {
  <span class="attribute">color</span>: <span class="number">#333</span>;
}</pre>
        <p>现在页面可视化感受已经提升了不少, 而一些特殊的文本,譬如代码的显示 <a
                class="step" data-step="5" href="#balance">还是不太合适</a>.</p>
    </section>

    <section id="balance">
        <h2>和谐</h2>
        <p>只需要一些小小的操作就能让整个页面更加地和谐:</p>
<pre><span class="selector">code</span>,
<span class="selector">pre</span> {
  <span class="attribute">background</span>: <span class="number">#eee</span>;
}

<span class="selector">code</span> {
  <span class="attribute">padding</span>: <span class="number">2</span>px <span class="number">4</span>px;
  <span class="attribute">vertical-align</span>: text-bottom;
}

<span class="selector">pre</span> {
  <span class="attribute">padding</span>: <span class="number">1</span>em;
}</pre>
        <p>到这里你的页面已经达到了平均水平,我们下面希望给它一些独特的
            <a class="step" data-step="6"
               href="#primary-color">标志</a>.
        </p>
    </section>

    <section id="primary-color">
        <h2>原色</h2>
        <p>很多的品牌都会选用某个 <strong>primary color</strong> 作为其独特的标志,而在网站中,我们往往在某些交互地元素,譬如<strong>链接上</strong>设置一些醒目的颜色.</p>
<pre><span class="selector">a</span> {
  <span class="attribute">color</span>: <span class="number">#e81c4f</span>;
}</pre>
        <p>同样是为了和偕,我们需要添加 <a class="step" data-step="7" href="#secondary-colors">额外的色彩</a>.</p>
    </section>

    <section id="secondary-colors">
        <h2>二次色</h2>
        <p>我们可以为边、背景乃至于body字体颜色设置更多的个性化显示.</p>
<pre><span class="selector">body</span> {
  <span class="attribute">color</span>: <span class="number">#566b78</span>;
}

<span class="selector">code</span>,
<span class="selector">pre</span> {
  <span class="attribute">background</span>: <span class="number">#f5f7f9</span>;
  <span class="attribute">border-bottom</span>: <span class="number">1</span><span class="unit">px</span> solid <span
            class="number">#d8dee9</span>;
  <span class="attribute">color</span>: <span class="number">#a7adba</span>;
}

<span class="selector">pre</span> {
  <span class="attribute">border-left</span>: <span class="number">2</span><span class="unit">px</span> solid <span
            class="number">#69c</span>;
}</pre>
        <p>下面,我们考虑来改造下字体的 <a class="step" data-step="8" href="#custom-font">形状</a>...
        </p>
    </section>

    <section id="custom-font">
        <h2>自定义字体</h2>
        <p>上文中也提到过,文本是网站的主要内容,那么我们设置一个 <strong>自定义的字体</strong> 会为页面添加更多明显的标志.</p>
        <p>你可以选择使用类似于 <a href="https://typekit.com/" target="_blank">Typekit</a>这样的在线服务或者自定义些webfont, 我们这里使用来自于
            免费的 <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>
            服务的: <code>"Roboto"</code></p>
<pre><span class="keyword">@import</span> <span class="string">'https://fonts.googleapis.com/css?family=Roboto:300,400,500'</span>;

<span class="selector">body</span> {
  <span class="attribute">font-family</span>: <span class="string">"Roboto"</span>, <span
            class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
        <p>我们已经为 <em>文本</em>做了很多改造, 那么应该如何添加 <a class="step" data-step="9"
                                                                                      href="#images">其他元素呢?</a>...
        </p>
    </section>

    <section id="images">
        <h2>
            <img src="https://coding.net/u/hoteam/p/Cache/git/raw/master/2016/7/3/images.png"
                 alt="Spongebob rainbow meme saying 'Images'">
        </h2>
        <p>Graphics 与 icons 也是不错的网站装饰物,能够提升你文本的感染力,或者更积极地传递你在文本中包含的内容</p>
        <p>我们首先为页首设置 <strong>背景图</strong> ,这张图片选自 <a
                href="https://unsplash.com/photos/qH36EgNjPJY" target="_blank">Unsplash</a></p>
<pre><span class="selector">header</span> {
  <span class="attribute">background-color</span>: <span class="number">#263d36</span>;
  <span class="attribute">background-image</span>: url(<span class="string">"header.jpg"</span>);
  <span class="attribute">background-position</span>: center top;
  <span class="attribute">background-repeat</span>: no-repeat;
  <span class="attribute">background-size</span>: cover;
  <span class="attribute">line-height</span>: <span class="number">1.2</span>;
  <span class="attribute">padding</span>: <span class="number">10</span><span class="unit">vw</span> <span
            class="number">2</span><span class="unit">em</span>;
  <span class="attribute">text-align</span>: center;
}</pre>
        <p>然后添加一个 <strong>logo</strong></p>
<pre><span class="selector">header img</span> {
  <span class="attribute">display</span>: inline-block;
  <span class="attribute">height</span>: <span class="number">120</span><span class="unit">px</span>;
  <span class="attribute">vertical-align</span>: top;
  <span class="attribute">width</span>: <span class="number">120</span><span class="unit">px</span>;
}</pre>
        <p>再改进下文本的样式.</p>
<pre><span class="selector">header h1</span> {
  <span class="attribute">color</span>: white;
  <span class="attribute">font-size</span>: <span class="number">2.5</span><span class="unit">em</span>;
  <span class="attribute">font-weight</span>: <span class="number">300</span>;
}

<span class="selector">header a</span> {
  <span class="attribute">border</span>: <span class="number">1</span><span class="unit">px</span> solid <span
            class="number">#e81c4f</span>;
  <span class="attribute">border-radius</span>: <span class="number">290486</span><span class="unit">px</span>;
  <span class="attribute">color</span>: white;
  <span class="attribute">font-size</span>: <span class="number">0.6</span><span class="unit">em</span>;
  <span class="attribute">letter-spacing</span>: <span class="number">0.2</span><span class="unit">em</span>;
  <span class="attribute">padding</span>: <span class="number">1</span><span class="unit">em</span> <span
            class="number">2</span><span class="unit">em</span>;
  <span class="attribute">text-transform</span>: uppercase;
  <span class="attribute">text-decoration</span>: none;
  <span class="attribute">transition</span>: none <span class="number">200</span><span class="unit">ms</span> ease-out;
  <span class="attribute">transition-property</span>: color, background;
}

<span class="selector">header a:hover</span> {
  <span class="attribute">background</span>:  <span class="number">#e81c4f</span>;
  <span class="attribute">color</span>: white;
}</pre>
        <p><a href="#header">And voilà</a>!</p>
        <p>我们已经在短短几分钟之内设计了个得体的页面,这些都是遵循基本的网站设计原则,那么,还有 <a
                class="step" data-step="10" href="#share">最后一件事</a> 等着我们去做~</p>
    </section>

    <section id="share">
        <h2>多谢阅读</h2>
        <nav class="buttons">
            <a class="button github"
               href="https://github.com/wxyyxc1992/web-frontend-practice-handbook/blob/master/introduction/web-design-in-4-minutes.html"
               target="_blank">
                <em>下载</em>
                <strong>GitHub</strong>
            </a>
            <a class="button facebook"
               href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F"
               rel="nofollow" target="_blank">
                <em>分享</em> <strong>Facebook</strong>
            </a>
            <a class="button twitter" data-social-network="Twitter" data-social-action="tweet"
               data-social-target="http://jgthms.com/web-design-in-4-minutes/"
               href="https://twitter.com/intent/tweet?text=Web%20Design%20in%204%20minutes&amp;url=http%3A%2F%2Fjgthms.com%2Fweb-design-in-4-minutes%2F&amp;via=jgthms"
               rel="nofollow" target="_blank">
                <em>分享</em> <strong>Twitter</strong>
            </a>
        </nav>
        <p>
            如果你想进一步学习Web前端开发相关知识
            <br>
            <a href="https://github.com/wxyyxc1992/web-frontend-practice-handbook" target="_blank">
                <strong>前端入门与最佳实践手册</strong>,
                <span>笔者自己的前端系列文章列表</span>
            </a>.
            <br>
            <a href="https://github.com/wxyyxc1992/web-frontend-practice-handbook/blob/master/introduction/my-frontend-road.md"
               target="_blank">
                <strong>我的前端之路</strong>,
                <span>纵览这几年来前端变迁之路</span>
            </a>.
            <br>
            <a href="https://github.com/wxyyxc1992/web-frontend-practice-handbook/blob/master/introduction/frontend-from-zero-to-hero.md"
               target="_blank">
                <strong>前端攻略——从路人甲到英雄无敌</strong>,
                <span>不错的前端入门指南</span>
            </a>.
            <br>

        </p>
    </section>

    <footer>
        <a class="button" href="https://twitter.com/jgthms" target="_blank">感谢原作者: <strong>@jgthms</strong></a>
        <br/>
        <img src="http://153.3.251.190:11900/web-design-in-4-minutes" alt="">
    </footer>
</main>

<a id="visited" href="#share">貌似你已经浏览过了,需要直接跳到最后吗?</a>

<script type="text/javascript">
    var steps = document.querySelectorAll('.step');
    var body = document.querySelector('body');
    var html = document.querySelector('html');

    for (var i = 0; i < steps.length; i++) {
        var element = steps[i];
        element.onclick = function (event) {
            var number = this.dataset.step;
            var target = this.href;
            addStep(number, target);
        }
    }
    ;

    function removeVisited() {
        if (document.getElementById('visited')) {
            body.removeChild(document.getElementById('visited'));
        }
    }

    function addStep(number, target) {
        html.className += ' step' + number;

        removeVisited();

        if (target !== '') {
            var id = target.split('#')[1];
            document.getElementById(id).className = 'animate';
        }

        if (number === '7') {
            loadGoogleFont();
        }
    }

    var visited = document.querySelector("#visited");

    visited.onclick = function () {
        loadGoogleFont();
        for (var i = 0; i < 11; i++) {
            html.className += ' step' + i;
        }
        removeVisited();
    }

    WebFontConfig = {
        google: {
            families: ['Roboto:300,400,500']
        }
    };

    function loadGoogleFont() {
        (function (d) {
            var wf = d.createElement('script'), s = d.scripts[0];
            wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
            s.parentNode.insertBefore(wf, s);
        })(document);
    }
</script>
</body>
</html>
